<template>
<div class="app">
  <van-nav-bar
    style="background-color: whitesmoke"
    left-arrow
    @click-left="$router.back()"
  />
  <div class="main">
    充值余额
  </div>
  <div class="content">
    <div class="tabs">
      <template v-for="(item,index) in moneyList">
        <div :key="item.id" class="tab" @click="clickMoney(index,item)" :class="num === index ? 'active' : ''">{{item.value}}元</div>
      </template>
    </div>
  </div>
  <div class="main">
    支付方式
  </div>
  <div class="bottom">
    <van-icon name="wechat-pay" color="#54C748" style="left: 0"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;微信支付&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<van-icon name="checked" color="#2dd9cf" />
  </div>
  <div class="btn">
    <van-button color="#2dd9cf" block round @click="addBalance">确定充值</van-button>
    <p>点击同意即同意<a><router-link to="agreement">《充值协议》</router-link></a></p>
  </div>
</div>
</template>

<script>
import { Dialog } from 'vant'
export default {
  name: 'deal',
  components: {
  },
  data () {
    return {
      num: 0,
      moneyList: [
        { id: '001', value: '5' },
        { id: '002', value: '10' },
        { id: '003', value: '20' },
        { id: '004', value: '30' },
        { id: '005', value: '50' }
      ],
      money: ''
    }
  },
  computed: {
    userInfo () {
      return this.$store.state.user
    }
  },
  methods: {
    clickMoney (index, item) {
      this.num = index
      this.money = item.value
    },
    addBalance () {
      Dialog.confirm({
        title: '确认',
        message: '确认给该用户充值?'
      }).then(() => {
        this.postRequestForm('/sys/vip/balance', { id: this.userInfo.user.id, balance: this.money }).then(({ data }) => {
          if (data.code === 200) {
            this.$toast.success(data.message)
          } else {
            this.$toast.fail(data.message)
          }
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
*{
  padding: 0;
  margin: 0;
  .app{
    width: 100%;
    height: 100%;
    background-color: whitesmoke;
    .main{
      padding: 10px 0 20px 20px;
      font-size: 30px;
      font-weight: 500;
    }
    .content{
      height: 40vh;
      width: 100%;
      .tabs{
        height: 40vh;
        width: 90%;
        margin: 0 auto;
        .active{
          color: whitesmoke;
          background-color: #2DD9CF !important;
        }
        .tab{
          float: left;
          height: 10vh;
          width: 40%;
          margin: 3% 5%;
          text-align: center;
          border-radius: 10px;
          line-height: 10vh;
          font-weight: bold;
          font-size: 18px;
          background-color: #e9e9e9;
        }
      }
    }
    .bottom{
      height: 10vh;
      width: 90%;
      line-height: 10vh;
      border-radius: 10px;
      box-shadow:1px 1px 1px 1px #ccc;
      font-size: 20px;
      margin: 0 auto;
      text-align: center;
      background-color: white;
    }
    .btn{
      margin: 20px;
      text-align: center;
      p{
        color: darkgray;
        margin: 10px;
        a{
          color: #2DD9CF;
          font-weight: 500;
        }
      }
    }
  }
}
</style>
